<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <script src="vue.js"></script>
    <script src="axios-0.18.0.js"></script>
</head>
<body>

    <!-- axios -->
    <div id="app">
        <button @click="fun1()">Axios发送get请求，不传参数</button>

        <hr>

        <ul>
            <li v-for="user in users">
                {{user.id}} - {{user.name}} - {{user.birth}}  <button @click="del(user.id)">删除</button>   <button @click="update(user.id)">修改</button>
            </li>
        </ul>



        <form>
            <input v-model="user.id" disabled/><br>
            <input v-model="user.name" placeholder="请输入用户名"/><br>
            <input v-model="user.birth" placeholder="请输入生日"/><br>
            <input type="button" @click="modify()" value="更新"/>
        </form>

    </div>


</body>


    <script>
        new Vue({
            el : "#app",
            data : {
                users:[],
                user:{}
            },
            methods : {
                modify(){
                    axios.post('/test/modify', this.user)
                        .then((response) => {
                            if(response.data == "1"){
                                this.fun1();
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                },
                del(id){
                    alert(id);
                    axios.get('/test/delete?id=' + id)
                    //es6 提供了 箭头函数 =>      vue的this对象被传递了
                        .then((response) => {
                            if(response.data == "1"){
                                this.fun1();
                            }
                        })
                        .catch((error) => {
                            // handle error
                            console.log(error);
                        }).finally( () => {
                        console.log("我肯定要执行");
                    });
                },
                update(id){
                    //es6 提供模板字符串，很好用
                    axios.get(`/test/update?id=${id}`)
                    //es6 提供了 箭头函数 =>      vue的this对象被传递了
                        .then((response) => {
                            //user对象的json串
                            this.user = response.data;
                        })
                        .catch((error) => {
                            // handle error
                            console.log(error);
                        }).finally( () => {
                        console.log("我肯定要执行");
                    });
                },
                fun1(){
                    //var _this = this;
                    //查询所有
                    axios.get('/test/list')
                        //es6 提供了 箭头函数 =>      vue的this对象被传递了
                        .then((response) => {
                            // handle success
                            console.log(response);
                            //this 当前对象：【axios】
                            this.users = response.data;
                            console.log(this.users);
                        })
                        .catch((error) => {
                            // handle error
                            console.log(error);
                        }).finally( () => {
                            console.log("我肯定要执行");
                        });
                }

            }
        });

    </script>


</html>